<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'执行'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "55">
        <div class="analyItem"  v-for="(item, index) of protectList" :key="index" >
            <p class="analyItemTit tx-center">{{item.name | truncate(5)}}</p>
            <div class="analyItemCon">
                <div class="fixedBox">
                    <rx-viewer :images="item.data" style="position:relative" class="fl">
                        <div class="clearfix tx-center">
                            <div class="mr10">
                                <img :src="item.data | smallImg(80, 80)">
                                <span class="standardStyle">标</span>
                            </div>
                        </div>
                    </rx-viewer>
                    <div class="fl">
                        <rx-viewer :images="item.senceImg" style="position:relative" :option={}>
                            <div class="clearfix tx-center">
                                <div class="mr10">
                                    <img :src="item.senceImg | smallImg(80, 80)">
                                    <span class="standardStyle">现</span>
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <rx-upload
                        class="fl"
                        :data="{id: item.id,index: index}" :init="{class: 2, mime: 1}"
                        :elStyle="{width:'90px', height: '80px'}"
                        @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                </div>
                 <div>{{item.content}}</div>
                 <span class="circlemark circlemark-lightGreen">完</span>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">
                <div class="clearfix">
                     <label class="fl pr8">验收报告</label>
                    <rx-viewer :images="checkImgLIst" style="position:relative" class="fl">
                        <div class="clearfix tx-center">
                            <div class="mr10" v-for="(item,index) in  checkImgLIst" :key="index">
                                <img :src="item | smallImg(80, 80)">
                            </div>
                        </div>
                    </rx-viewer>
                    <rx-upload
                        class="fl"
                        :data="{}" :init="{class: 2, mime: 1}"
                        :elStyle="{width:'90px', height: '80px'}"
                        @success="successUploadCheck">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                </div>
                <div class="mt10 clearfix">
                    <label class="fl pr8">验收描述</label>
                    <textarea class="col-md-10"></textarea>
                </div>
                <div class="mt10">
                    <label class="fl pr8">验收结果</label>
                    <el-radio v-model="radio" label="1">合格</el-radio>
                    <el-radio v-model="radio" label="2">不合格</el-radio>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <input type="button" class="uiBtn-normal uiBtn-blue" value="确定">
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            checkImgLIst: [], // 验收图片
            radio: '1',
            value: 0,
            nodeList: [
                {
                    name: '水电验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '试压泵、水平尺检测拍照'
                },
                {
                    name: '瓦工验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '红外检测仪、水平尺、塞尺、直角尺、卷尺、空鼓锤检测拍照'
                },
                {
                    name: '水路验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '试压泵、水平尺检测拍照'
                },
                {
                    name: '木工验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '红外检测仪、水平尺、塞尺、直角尺、卷尺检测拍照'
                },
                {
                    name: '泥工验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '红外检测仪、水平尺、塞尺、直角尺、卷尺、空鼓锤检测拍照'
                },
                {
                    name: '防水验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '闭水最低48小时，楼下有没渗水'
                },
                {
                    name: '强弱电验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '电路遥测、数显电笔、网络检测仪检测拍照'
                },
                {
                    name: '油漆验收',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '直角尺、红外线、水平尺、塞尺 手电筒检测拍照'
                }
            ],
            houseList: [
                {
                    name: '门，窗',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '上传各项器材检测照片（每项检测前着工服，带工牌，现场自拍一张照片'
                },
                {
                    name: '墙，地，顶面',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '上传各项器材检测照片（每项检测前着工服，带工牌，现场自拍一张照片'
                },
                {
                    name: '强，弱电箱',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '上传各项器材检测照片（每项检测前着工服，带工牌，现场自拍一张照片'
                },
                {
                    name: '厨卫阳台下水管',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '上传各项器材检测照片（每项检测前着工服，带工牌，现场自拍一张照片'
                },
                {
                    name: '地漏',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '上传各项器材检测照片（每项检测前着工服，带工牌，现场自拍一张照片'
                },
                {
                    name: '卫生间防水',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '上传各项器材检测照片（每项检测前着工服，带工牌，现场自拍一张照片'
                }],
            imgAuditList: [
                {
                    name: '水路施工图',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                },
                {
                    name: '平面布局图',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                },
                {
                    name: '强弱电施工图',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                },
                {
                    name: '天花、隔墙、地面布局图',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                },
                {
                    name: '节点大样图',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                }],
            planList: [
                {
                    name: '工程量',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                },
                {
                    name: '单价',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                },
                {
                    name: '工艺',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '出具审图意见表（每项检测前着工服，带工牌，现场自拍一张照片）'
                }],
            materList: [
                {
                    name: '基础材料',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '1.各材料产品合格证。2.各材料品牌、规格、颜色照片。3.监理自拍照'
                },
                {
                    name: '主材',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '1.各材料产品合格证。2.各材料品牌、规格、颜色照片。3.监理自拍照'
                },
                {
                    name: '辅材',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '1.各材料产品合格证。2.各材料品牌、规格、颜色照片。3.监理自拍照'
                },
                {
                    name: '成品定制',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '1.各材料产品合格证。2.各材料品牌、规格、颜色照片。3.监理自拍照'
                }
            ],
            envirList: [
                {
                    name: '甲醛检测',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '环保检测仪器现场测试'
                },
                {
                    name: '苯、甲苯',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '环保检测仪器现场测试'
                },
                {
                    name: '二甲苯、氨气、tvoc',
                    data: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1554712893ApCxhii2KA.jpg',
                    senceImg: 'https://proj01.oss-cn-beijing.aliyuncs.com/common/1571397410dB3KXxKi54.png',
                    content: '环保检测仪器现场测试'
                }],
            protectList: []
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {
        this.switch()
    },
    methods: {
        successUploadCheck (value) {
            this.checkImgLIst.push(value.src)
        },
        switch () {
            this.protectList = []
            switch (this.leftInfo.id) {
            case 20:
                this.protectList = this.nodeList
                break
            case 21:
                this.protectList = this.houseList
                break
            case 22:
                this.protectList = this.planList
                break
            case 23:
                this.protectList = this.materList
                break
            case 24:
                this.protectList = this.envirList
                break
            case 25:
                this.protectList = this.houseList
                break
            default:
                break
            }
        }
    },
    watch: {
        leftInfo () {
            this.switch()
        }
    }
}
</script>
<style lang="">
    .fixedBox {
        display: flex;
        align-items: center;
    }
</style>
